<script setup lang="ts">
import { useNow } from '@vueuse/core';
import { onMounted, onUnmounted } from 'vue';
import TotoroApiWrapper from '~/src/wrappers/TotoroApiWrapper';
import generateRunReq from '~~/src/controllers/generateSunRunExercisesReq';
import generateRoute from '~~/src/utils/generateRoute';

// ========== 时间和状态管理 =========
const now = useNow({ interval: 1000 }); // 每秒更新的当前时间
const startTime = ref(new Date()); // 跑步开始时间
const endTime = ref(new Date()); // 跑步结束时间
const timePassed = computed(() => Number(now.value) - Number(startTime.value)); // 已经过的时间(毫秒)
const needTime = ref(0); // 需要跑步的总时间(毫秒)
const running = ref(false); // 是否正在跑步中

// ========== 数据获取和路由参数 =========
const sunRunPaper = useSunRunPaper(); // 跑步任务信息
const { params } = useRoute(); // 获取路由参数
const session = useSession(); // 用户会话信息
const { route } = params as { route: string }; // 路线ID参数

// ========== 计算属性 =========
const runned = computed(() => !running.value && !!needTime.value); // 是否已完成跑步
const target = computed(() => sunRunPaper.value.runPointList.find((r) => r.pointId === route)!); // 当前选择的路线信息

// ========== 核心跑步处理函数 =========
const handleRun = async () => {
  // 1. 生成跑步请求数据
  const { req, endTime: targetTime } = await generateRunReq({
    distance: sunRunPaper.value.mileage, // 跑步距离
    routeId: target.value.pointId, // 路线ID
    taskId: target.value.taskId, // 任务ID
    token: session.value.token, // 用户token
    schoolId: session.value.schoolId, // 学校ID
    stuNumber: session.value.stuNumber, // 学号
    phoneNumber: session.value.phoneNumber, // 手机号
    minTime: sunRunPaper.value.minTime, // 最小跑步时间
    maxTime: sunRunPaper.value.maxTime, // 最大跑步时间
  });

  // 2. 计算原本需要的跑步时间
  const originalNeedTime = Number(targetTime) - Number(new Date());

  // 3. 伪造时间 - 让进度条立即显示100%
  const fakeStartTime = new Date(Number(new Date()) - originalNeedTime);
  startTime.value = fakeStartTime;  // 伪造的开始时间
  endTime.value = new Date();       // 当前时间作为结束时间
  needTime.value = originalNeedTime; // 保持原始的需要时间
  running.value = true;

  // 4. 调用开始跑步API
  await TotoroApiWrapper.getRunBegin({
    campusId: session.value.campusId,
    schoolId: session.value.schoolId,
    stuNumber: session.value.stuNumber,
    token: session.value.token,
  });

  // 5. 立即提交（1秒延时用于UI显示）
  setTimeout(async () => {
    // 5.1 提交跑步基础数据（距离、时间、卡路里等）
    const res = await TotoroApiWrapper.sunRunExercises(req);

    // 5.2 生成模拟的跑步轨迹路径
    const runRoute = generateRoute(sunRunPaper.value.mileage, target.value);

    // 5.3 提交详细的跑步轨迹数据
    await TotoroApiWrapper.sunRunExercisesDetail({
      pointList: runRoute.mockRoute, // 模拟的轨迹点数组
      scantronId: res.scantronId, // 跑步记录ID
      breq: { // 基础请求信息
        campusId: session.value.campusId,
        schoolId: session.value.schoolId,
        stuNumber: session.value.stuNumber,
        token: session.value.token,
      },
    });

    // 5.4 标记跑步完成
    running.value = false;
  }, 1000); // 等待计算出的跑步时间后再提交
};

// ========== 生命周期钩子 =========
onMounted(() => {
  // 页面加载时添加离开确认事件监听
  window.addEventListener('beforeunload', handleBeforeUnload);
});

onUnmounted(() => {
  // 页面卸载时移除事件监听
  window.removeEventListener('beforeunload', handleBeforeUnload);
});

// ========== 防误操作函数 =========
function handleBeforeUnload(e: BeforeUnloadEvent) {
  // 如果正在跑步且未完成，阻止用户离开页面
  if (running.value && !runned.value) {
    e.preventDefault();
    e.returnValue = '跑步还未完成，确定要离开吗？';
  }
}
</script>

<template>
  <!-- 路线确认信息 -->
  <p class="text-body-1">
    已选择路径 {{ target.pointName }}
  </p>
  <p class="text-body-1 mt-2">
    请再次确认是否开跑
  </p>
  <p class="text-body-1 mt-2">
    开跑时会向龙猫服务器发送请求，所以请尽量不要在开跑后取消
  </p>

  <!-- 开始跑步按钮 - 只在未开始且未跑步时显示 -->
  <VBtn v-if="!runned && !running" color="primary my-4" append-icon="i-mdi-run" @click="handleRun">
    确认开跑
  </VBtn>

  <!-- 跑步进度显示 - 只在跑步进行中显示 -->
  <template v-if="running">
    <!-- 时间和百分比显示 -->
    <div class="d-flex justify-space-between mt-4">
      <span>{{ timePassed }}/{{ needTime }}</span>
      <span>{{ Math.ceil((timePassed / needTime) * 100) }}%</span>
    </div>
    <!-- 进度条 -->
    <VProgressLinear v-if="timePassed && needTime" color="primary" :model-value="(timePassed / needTime) * 100"
      class="mt-2" />
  </template>

  <!-- 完成提示 - 只在跑步完成后显示 -->
  <p v-if="runned" class="mt-4">
    <b>跑步完成，去 App 里看记录吧</b>
  </p>
</template>
